<template>
	<view class="detail">
		<view class="location" v-if="show">
			<van-tabs @click="scrollBar">
				<van-tab title="商品"></van-tab>
				<van-tab title="评价"></van-tab>
				<van-tab title="详情"></van-tab>
			</van-tabs>
		</view>
		<!-- 轮播图 -->
		<view class="detail-swiper">
			<swiper class="swiper" @change="changeSwiper" current="{{current}}">
				<swiper-item v-for="(item, index) in detailsList.arrlogo" :key="index">
					<view><image :src="item" mode=""></image></view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view class="dots-a">{{ current + 1 }}/{{ arrlogoLenght }}</view>
			</view>
			<view class="city">
				<van-icon name="location" />
				<text>长沙</text>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="detail-title margins">
			<view class="title ">
				￥
				<text class="title-a">{{ detailsList.Price }}</text>
				<text>起</text>
				/
				<text>台</text>
			</view>
			<view class="title-b">{{ detailsList.h1 }}</view>
			<view class="title-c">{{ detailsList.h6 }}</view>
			<view class="title-d flexCss-b">
				<view class="d-list">
					<van-icon name="passed" size="14" />
					<text>随时预约</text>
				</view>
				<view class="d-list">
					<van-icon name="passed" />
					<text>专业清洗工具</text>
				</view>
				<view class="d-list">
					<van-icon name="passed" />
					<text>阿姨专业培训</text>
				</view>
			</view>
		</view>

		<!-- 评论 -->
		<view class="comment">
			<view class="comment-title margins flexCss-a">
				<view class="left">评价({{ pl }}）</view>
				<view class="right" @click="clickRemark">
					<text>全部评论</text>
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="comment-list margins">
				<view v-for="item in plList" :key="item.id" class="comment-item">
					<view class="comment-img">
						<view class="img"><image :src="item.img" mode=""></image></view>
						<view class="info">
							<view class="user">
								<view class="name">{{ item.sf }}</view>
								<view class="star"><uni-rate size="16" :readonly="true" :value="item.pf" /></view>
							</view>
							<view class="evaluate">
								<view class="evaluate-icon" v-for="(item, i) in item.lb" :key="i">{{ item }}</view>
							</view>
						</view>
					</view>
					<view class="comment-desc">
						<view class="desc-top">{{ item.value }}</view>
						<view class="desc-button"><image v-for="(img, i) in item.imgs" :key="i" :src="img" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-list">
			<view class="detail-list-title">详情</view>
			<view class="detail-item" v-for="(item, index) in detailsList.biglogo" :key="index"><image :src="item" mode=""></image></view>
		</view>

		<view class="">
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" text="客服" />
				<van-goods-action-button @click="shopSpecs" text="立即购买" />
			</van-goods-action>
		</view>
		<view class="option">
			<van-popup :show="isOption" position="bottom" closeable custom-style="height: 80%;" @close="onClose">
				<view class="option-popup">
					<view class="option-title">请选择购买方式</view>
					<view class="option-title2">购买规格</view>
				</view>
				<view v-if="ggList.length" class="">
					<view class="option-list">
						<view :class="[item.id === classId ? 'active-gg' : '']" class="option-item flexCss-a " v-for="item in ggList" @click="choiceGg(item.id)" :key="item.id">
							<view class="left flexCss-b">
								<image :src="item.img" mode=""></image>
								<text>{{ item.label }}</text>
							</view>
							<view class="right">
								￥
								<text>{{ item.peice }}</text>
							</view>
						</view>
					</view>
					<view class="option-button">
						<van-goods-action><van-goods-action-button @click="getShop" text="确定" /></van-goods-action>
					</view>
				</view>

				<view v-else class="nullGg">
					<image src="https://static.daojia.com/pt/project/h5-order-list/img/no-data.202566e.png" mode=""></image>
					<view class="nullGg-a">暂无规格</view>
				</view>
			</van-popup>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide, onPageScroll } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { GetOrder } from '@/store/order.js'
import { reqgetdzList } from '@/api/modules/address.js'
import { reqShopOrder } from '@/api/modules/order.js'
import { reqGetComment } from '@/api/modules/comment .js'
import { reqShopDetails, reqShopSpecs } from '@/api/modules/order.js'
const getOrder = GetOrder()

const state = reactive({
	current: 0,
	value: 3,
	// 列表cid
	cid: '',
	detailsList: [],
	show: false,
	isOption: false,
	// 列表id
	id: '',
	arrlogoLenght: '',
	ggList: [],
	// 规格id
	classId: '',
	plList: [],
	pl: ''
})

// 提交订单
const getShop = async () => {
	const index = state.ggList.findIndex(item => item.id === state.classId)
	// console.log(state.ggList[index]);
	getOrder.addordder(state.ggList[index])
	// 获取手机号
	
	// 获取默认地址
	// const { data } = await reqgetdzList()
	// if (!data.data.length) {
	// 	uni.navigateTo({
	// 		url: '/subpkg/add-address/add-address'
	// 	})
	// } else {
	// console.log(data);
	// const index2 = data.data.findIndex(item => item.onsale === 1)
	// const { province, county, city, address } = data.data[index2]
	// console.log(data.data[index2]);
	// 	const address2 = province + county + city + address
	// 	console.log(state.cid, state.classId, state.id)
	// 	const { data: data2 } = await reqShopOrder({ phone, address: address2, cid: state.cid, oid: state.classId })
	// 	console.log(data2.data)&id=${data2.data}
	// 	if (data2.code === 200) {
	// 		setTimeout(() => {
	uni.navigateTo({
		url: `/subpkg/place-order/place-order?cid=${state.cid}&oid=${state.classId}`
	})
	// 		}, 500)
	// 	} else {
	// 		uni.showToast({
	// 			title: '请求失败',
	// 			icon: 'none'
	// 		})
	// 	}
	// }
}

// 跳转评论页
const clickRemark = () => {
	uni.navigateTo({
		url: `/subpkg/remark/remark?id=${state.id}`
	})
}

// 选择规格
const choiceGg = id => {
	state.classId = id
}

//关闭弹出层
const onClose = () => {
	state.isOption = false
}

// 获取规格
const shopSpecs = async () => {
	state.isOption = true
	const { data } = await reqShopSpecs(state.cid)
	if (!data.data.length) return
	console.log(data.data)
	state.ggList = data.data
	if (!data.data[0].id) return
	state.classId = data.data[0].id
}

// 获取详情
const getDetails = async () => {
	const { data } = await reqShopDetails({ cid: state.id })
	state.detailsList = data.data[0]
	uni.setNavigationBarTitle({ title: data.data[0].h1 })
	getOrder.getTitle(data.data[0].h1)
	state.arrlogoLenght = data.data[0].arrlogo.length
}

// 获取评论列表
const getpress = async () => {
	const page = 1
	const { data } = await reqGetComment(state.id, page)
	console.log(data)
	state.pl = data.data.total
	if (data.data.total < 3) {
		state.plList = data.data.list
	} else {
		data.data.list.forEach(item => {
			item.lb = item.lb.slice(0, 2)
			item.imgs = item.imgs.slice(0, 2)
		})
		state.plList = data.data.list.slice(0, 3)
	}
}

// 初始化
const init = () => {
	getDetails()
	getpress()
}

const changeSwiper = e => {
	state.current = e.detail.current
}
const onClick = e => {
	state.value = e.detail
}

const scrollBar = e => {
	const name = e.detail.title
	if (name == '评价') {
		uni.pageScrollTo({
			scrollTop: 330
		})
	} else if (name == '详情') {
		uni.pageScrollTo({
			scrollTop: 630
		})
	} else {
		uni.pageScrollTo({
			scrollTop: 0
		})
	}
}
// 页面加载
onLoad(message => {
	// 列表id
	state.id = message.id
	// 获取规格的id
	state.cid = message.cid
	console.log(state.cid)
	init()
})
onPageScroll(e => {
	e.scrollTop > 150 ? (state.show = true) : (state.show = false)
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { current, value, detailsList, show, isOption, arrlogoLenght, ggList, classId, plList, pl } = toRefs(state)
</script>

<style lang="scss">
page {
	padding: 0;
	background-color: #f5f5f5;
}

.nullGg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150rpx;
	margin-left: -150rpx;
	image {
		width: 300rpx;
		height: 300rpx;
	}
	.nullGg-a {
		margin-left: 80rpx;
	}
}

.detail {
	.detail-swiper {
		position: relative;
		.swiper {
			z-index: 100;
			height: 620rpx;
			swiper-item {
				view {
					image {
						width: 100%;
						height: 620rpx;
					}
				}
			}
		}
		.city {
			padding: 5rpx 20rpx;
			height: 50rpx;
			border-radius: 40rpx;
			position: absolute;
			background: rgba(4, 8, 24, 0.4);
			top: 20rpx;
			left: 29rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 50rpx;
			font-weight: 600;
			text {
				margin-left: 5rpx;
			}
		}
		.dots {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			.dots-a {
				color: #fff;
				background: rgba(4, 8, 24, 0.4);
				border-radius: 40rpx;
				font-size: 24rpx;
				padding: 5rpx 15rpx;
				position: absolute;
				bottom: 23rpx;
				right: 30rpx;
			}
			.active {
				background-color: #d2d2d2;
			}
		}
	}

	.detail-title {
		background-color: #fff;
		height: 260rpx;
		.title {
			margin-top: 20rpx;
			height: 80rpx;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 80rpx;
			color: #f33f3e;
			.title-a {
				font-size: 46rpx;
			}
		}
		.title-b {
			font-size: 32rpx;
			font-weight: 600;
		}
		.title-c {
			padding: 15rpx 0;
			font-size: 26rpx;
			color: #888b99;
		}
		.title-d {
			margin-top: 20rpx;
			.d-list {
				margin-right: 40rpx;
				font-size: 26rpx;
				color: #888b99;
				text {
					margin-left: 5rpx;
				}
			}
		}
	}

	.comment {
		width: 100%;
		height: 100%;
		margin-top: 30rpx;
		background-color: #fff;
		.comment-title {
			font-size: 28rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #f5f5f5;
			.right {
				font-size: 24rpx;
				text {
					color: #f33f3e;
					margin-right: 10rpx;
				}
			}
		}

		.comment-list {
			width: 100%;
			margin-top: 30rpx;
			overflow-y: scroll;
			display: flex;
			.comment-item {
				width: 500rpx;
				padding-right: 50rpx;
				flex-shrink: 0;
				.comment-img {
					display: flex;
					.img {
						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
					}
					.info {
						margin-left: 30rpx;
						.user {
							display: flex;
						}
						.name {
							// margin-top: -5rpx;
							margin-right: 10rpx;
						}
						.star {
							margin-top: 8rpx;
						}
						.evaluate {
							display: flex;
							margin-top: 10rpx;
							.evaluate-icon {
								margin-right: 20rpx;
								border: 1px solid #e4e7eb;
								border-radius: 4rpx;
								color: #888b99;
								font-size: 24rpx;
							}
						}
					}
				}

				.comment-desc {
					.desc-top {
						font-size: 28rpx;
						// height: 130rpx;
						padding: 30rpx 0;
					}
					.desc-button {
						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}
	}

	.detail-list {
		margin-top: 30rpx;
		background-color: #fff;
		.detail-list-title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-weight: 600;
			font-size: 36rpx;
		}
		.detail-item {
			image {
				width: 100%;
				height: 900rpx;
			}
		}
	}

	.location {
		position: fixed;
		background-color: #fff;
		top: 0;
		width: 100%;
		// z-index: 88;
		.van-ellipsis {
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.option {
		.van-popup {
			width: 95%;
			margin: 0 20rpx;
			border-radius: 10rpx 10rpx 0 0;
			.option-popup {
				padding: 40rpx 30rpx;
				.option-title {
					font-size: 38rpx;
					font-weight: 600;
				}
				.option-title2 {
					margin-top: 20rpx;
					font-size: 34rpx;
				}
			}

			.option-list {
				.option-item {
					margin: 0 20rpx 20rpx 20rpx;
					padding: 18rpx 0;
					border: 1rpx solid #fff;
					.left {
						margin-left: 30rpx;
						image {
							width: 80rpx;
							height: 60rpx;
							border-radius: 10rpx;
						}
						text {
							margin-left: 10rpx;
						}
					}
					.right {
						color: #f33f3e;
						margin-right: 30rpx;
						font-size: 24rpx;
						font-weight: 600;
						text {
							font-size: 34rpx;
							font-weight: 500;
						}
					}
				}
				.active-gg {
					background-color: #fff8f7;
					border: 1rpx solid #f33f3e;
					border-radius: 10rpx;
				}
			}

			.option-button {
				// position: absolute;
				width: 95%;
				height: 80rpx;
				bottom: 30rpx;
				padding: 0 20rpx;
				// background-color: #fff;
				.van-goods-action {
					margin: 0 30rpx;
				}
			}
		}
	}
}
</style>
